<template>
  <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-form-item label="昵称" v-bind="validateInfos.nickName">
      <a-space align="baseline">
        <a-input v-model:value="formState.nickName" placeholder="请输入昵称" />
        <span style="color: #c0c0c0; margin-left: 10px">用户昵称不作为登录使用</span>
      </a-space>
    </a-form-item>
    <a-form-item label="手机号" v-bind="validateInfos.phone">
      <a-space align="baseline">
        <a-input v-model:value="formState.phone" placeholder="请输入手机号" />
        <span style="color: #c0c0c0; margin-left: 10px">手机号码不能重复</span>
      </a-space>
    </a-form-item>
    <a-form-item label="性别">
      <a-radio-group v-model:value="formState.gender">
        <a-radio value="男">男</a-radio>
        <a-radio value="女">女</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item style="margin: 20px">
      <a-button type="primary" @click.prevent="onSubmit">保存配置</a-button>
    </a-form-item>
  </a-form>
</template>
<script lang="ts">
  import { defineComponent, reactive, toRaw } from 'vue';
  import { Form, notification } from 'ant-design-vue';
  import { useUserStore } from '/@/store/modules/user';
  import { editUserCenterApi } from '/@/api/user';

  const formState = reactive<{
    id: string | number | null;
    nickName: string;
    gender: string | undefined;
    phone: string | undefined;
  }>({
    id: null,
    nickName: '',
    gender: '男',
    phone: '',
  });
  const rulesRef = reactive({
    nickName: [
      {
        required: true,
        message: '请输入昵称',
      },
    ],
    phone: [
      {
        required: true,
        message: '请输入手机号',
      },
    ],
  });
  const useForm = Form.useForm;
  const { validate, validateInfos } = useForm(formState, rulesRef);
  const userStore = useUserStore();
  export default defineComponent({
    components: {},
    setup() {
      const user = userStore.getUser;
      formState.id = user.id;
      formState.nickName = user.nickName;
      formState.gender = user.gender;
      formState.phone = user.phone;

      const onSubmit = (_e: MouseEvent) => {
        validate()
          .then(async () => {
            const user = toRaw(formState);
            try {
              await editUserCenterApi({ ...user });
              await userStore.UserInfoAction();
              notification['success']({
                message: '编辑用户成功',
                duration: 3,
              });
            } catch (error) {}
          })
          .catch((err) => {
            console.log('error', err);
          });
      };
      return {
        user,
        validateInfos,
        formState,
        labelCol: { style: { width: '70px' } },
        wrapperCol: { span: 14 },
        onSubmit,
      };
    },
  });
</script>
<style lang="less" scoped></style>
